/**
 * @Title: useContextMenu
 * @Author  dudalei
 * @Package
 * @Date  2024/10/15 下午11:02
 * @description: 使用快捷键
 */

import type { App } from 'leafer-ui'
import { type ILeaf, type IUI, KeyEvent } from 'leafer-editor'

export interface IContextMenu {
  Delete(): void
  Ctrl_A(): void
  Ctrl_B(): void
  Ctrl_C(): void
  verticallyCentered(): void
  horizontallyCentered(): void
  Ctrl_D(): void
  Ctrl_U(): void
  downOne(): void
  Ctrl_G(): void
  upOne(): void
}

/**
 * 使用快捷键
 * @param app
 * @param contextMenu
 */
export const useShortcutKeys = (app: App, contextMenu: IContextMenu) => {
  // 是否按下了control
  const keyDown = reactive({
    control: false,
    a: false,
    b: false,
    c: false,
    d: false,
    g: false,
    u: false,
    delete: false,
    '[': false,
    ']': false,
  })
  const Ctrl_A = computed(() => keyDown.control && keyDown.a)
  const Ctrl_B = computed(() => keyDown.control && keyDown.b)
  const Ctrl_C = computed(() => keyDown.control && keyDown.c)
  const Ctrl_D = computed(() => keyDown.control && keyDown.d)
  const Ctrl_G = computed(() => keyDown.control && keyDown.g)
  const Ctrl_U = computed(() => keyDown.control && keyDown.u)
  const Delete = computed(() => keyDown.delete)
  const upOne = computed(() => keyDown['['])
  const downOne = computed(() => keyDown[']'])
  type KeyType = keyof typeof keyDown
  app.on(KeyEvent.HOLD, (event: KeyEvent) => {
    const key = event.key.toLowerCase() as KeyType
    // console.log(event.key, event.origin.target.tagName)
    if (!Object.prototype.hasOwnProperty.call(keyDown, key)) {
      event.origin.stopPropagation()
      return
    }
    if (key === 'd') {
      event.origin.preventDefault()
    }
    console.log(key, '按下:', event.origin.target.tagName === 'BODY')
    keyDown[key] = event.origin.target.tagName === 'BODY'
  })
  app.on(KeyEvent.UP, (event: KeyEvent) => {
    const key = event.key.toLowerCase() as KeyType
    if (!Object.prototype.hasOwnProperty.call(keyDown, key)) {
      return
    }
    if (key === 'd') {
      event.origin.preventDefault()
    }

    keyDown[key] = false
    // console.log(event.key, '按键抬起')
  })

  watch(Ctrl_A, (v) => {
    if (v) {
      contextMenu.Ctrl_A()
      console.log('Control + A ')
    }
  })
  watch(Ctrl_C, (v) => {
    if (v) {
      contextMenu.Ctrl_C()
      console.log('Control + C ')
    }
  })
  watch(Delete, (v) => {
    if (v) {
      contextMenu.Delete()
      console.log('Delete')
    }
  })
  watch(Ctrl_G, (v) => {
    if (v) {
      contextMenu.Ctrl_G()
      console.log('Control + G ')
    }
  })
  watch(Ctrl_U, (v) => {
    if (v) {
      contextMenu.Ctrl_U()
      console.log('Control + U ')
    }
  })
  watch(Ctrl_D, (v) => {
    if (v) {
      contextMenu.Ctrl_D()
      console.log('Control + D ')
    }
  })
  watch(Ctrl_B, (v) => {
    if (v) {
      contextMenu.Ctrl_B()
      console.log('Control + B ')
    }
  })
  watch(upOne, (v) => {
    if (v) {
      contextMenu.upOne()
      console.log('[')
    }
  })
  watch(downOne, (v) => {
    if (v) {
      contextMenu.downOne()
      console.log('[')
    }
  })
}

/**
 * 使用右键菜单功能
 * @param app
 */
export const useContextMenuFn = (getApp: () => App): IContextMenu => {
  // 获取最大值和最小值
  const getMaxMinZIndex = inject(getMaxMinZIndextKey)
  const setMaxMinZIndex = inject(setMaxMinZIndextKey)
  // 右键功能
  return {
    // 全选
    Ctrl_A() {
      const app = getApp()
      // 添加完成后选择
      app.editor.select(app.tree.children)
      console.log('全选')
    },
    // 复制 并且粘贴
    Ctrl_C() {
      const uis: ILeaf[] & IUI[] = []
      const app = getApp()
      app.editor.list.forEach((item) => {
        console.log('复制前', item.x, item.y)
        const clone = item.clone()
        uis.push(clone)
        console.log('复制后', clone.x, clone.y)
      })

      // 添加复制的元素
      app.tree.addMany(...uis)
      // 添加完成后选择
      app.editor.select(uis)
      console.log('复制')
    },
    // 粘贴
    /*  Ctrl_V() {
      const uis: ILeaf[] & IUI[] = []

      leafer.editor.list.forEach((item) => {
        uis.push(item.clone())
      })
      // 添加复制的元素
      leafer.tree.addMany(...uis)
      // 添加完成后选择
      leafer.editor.select(uis)
      console.log('复制')
    },*/
    // 删除
    Delete() {
      console.log('删除')
      const app = getApp()
      app.editor.list.forEach((item) => {
        item.destroy()
      })
      // 删除完成后取消选择
      app.editor.cancel()
    },
    // 成组
    Ctrl_G() {
      // 如果选择的元素大于2则可以 大组
      console.log('打组')
      const app = getApp()
      app.editor.group(app.editor.list as any)
    },
    // 成组
    Ctrl_U() {
      // 如果选择的元素大于2则可以 大组
      console.log('解组')
      const app = getApp()
      app.editor.ungroup()
    },
    // 向上移动一层
    upOne() {
      console.log('上移一层')
      const app = getApp()
      app.editor.list.forEach((item) => {
        item.zIndex! += 1
      })
    },
    // 向下移动一层
    downOne() {
      console.log('下移一层')
      const app = getApp()
      app.editor.list.forEach((item) => {
        item.zIndex! -= 1
      })
    },
    // 置顶
    Ctrl_D() {
      console.log('置顶')
      const app = getApp()
      // app.editor.toTop()
      const maxMinZIndex = getMaxMinZIndex ? getMaxMinZIndex() : { min: 0, max: 0 }
      const max = maxMinZIndex.max + 1
      app.editor.list.forEach((item) => {
        item.zIndex = max
      })
      setMaxMinZIndex && setMaxMinZIndex(maxMinZIndex.min, max)
    },
    // 置顶
    Ctrl_B() {
      console.log('置底')
      const app = getApp()
      // app.editor.toBottom()
      const maxMinZIndex = getMaxMinZIndex ? getMaxMinZIndex() : { min: 0, max: 0 }
      const min = maxMinZIndex.min - 1
      app.editor.list.forEach((item) => {
        item.zIndex = min
      })

      setMaxMinZIndex && setMaxMinZIndex(min, maxMinZIndex.max)
    },
    // 垂直居中
    verticallyCentered() {
      const app = getApp()

      // 如果选择的元素大于2则可以 大组
      console.log('上下居中操作')
      // 编辑框移动区域元素。
      const { width, height } = app.editor.editBox.rect
      const { x, y } = app.editor.element!
      console.log('框选的坐标位置', x, y)
      const list = app.editor.list
      // 这个是手动计算
      /*    // 得到最小的y坐标
      const minYs: number[] = []

      // 得到边框的宽高
      list.forEach((item) => {
        minYs.push(item.y!)
      })
      // 最小的y坐标
      const minY = Math.min(...minYs)*/
      const centerY = y! + height! / 2
      // 先找到最大的高度
      const heights: number[] = []
      list.forEach((item) => {
        heights.push(item.height!)
      })
      // 最大高度
      const maxHeight = Math.max(...heights)
      list.forEach((item) => {
        // 直接等于中心点 因为元素的起点在元素的中心点
        // 如果不等于中心点，则移动
        if (centerY !== item.y! + maxHeight / 2) {
          item.y = centerY
        }
      })
      // 操作之后取消选择
      app.editor.cancel()
      // 然后在重新选择
      app.editor.select(list)
    },
    // 水平居中
    horizontallyCentered() {
      const app = getApp()

      // 如果选择的元素大于2则可以 大组
      console.log('上下居中操作')
      // 编辑框移动区域元素。
      const { width } = app.editor.editBox.rect
      const { x, y } = app.editor.element!
      console.log('框选的坐标位置', x, y)
      const list = app.editor.list
      // 这个是手动计算
      /*    // 得到最小的y坐标
      const minYs: number[] = []

      // 得到边框的宽高
      list.forEach((item) => {
        minYs.push(item.y!)
      })
      // 最小的y坐标
      const minY = Math.min(...minYs)*/
      const centerX = x! + width! / 2
      // 先找到最大的宽度
      const widths: number[] = []
      list.forEach((item) => {
        widths.push(item.width!)
      })
      // 最大高度
      const maxHeight = Math.max(...widths)
      list.forEach((item) => {
        // 直接等于中心点 因为元素的起点在元素的中心点
        // 如果不等于中心点，则移动
        if (centerX !== item.x! + maxHeight / 2) {
          item.x = centerX
        }
      })
      // 操作之后取消选择
      app.editor.cancel()
      // 然后在重新选择
      app.editor.select(list)
    },
  }
}
